<li local-class='translations-list-item {{if this.isInEditMode "item--editMode"}}' data-dir={{if this.revisionTextDirRtl 'rtl'}}>
  <span local-class='item-header' data-dir={{if this.revisionTextDirRtl 'rtl'}}>
    <span local-class='item-edit-wrapper'>
      <span local-class='item-edit'>
        <span role='button' {{on 'click' (fn this.toggleEdit)}}>
          {{#if this.isInEditMode}}
            {{inline-svg 'assets/x.svg' local-class='item-edit-icon'}}
          {{else}}
            {{inline-svg 'assets/pencil.svg' local-class='item-edit-icon'}}
          {{/if}}
        </span>
      </span>
      <LinkTo @route='logged-in.project.translation' @models={{array @project.id @translation.id}} local-class='item-link'>
        <strong local-class='item-key'>
          {{this.translationKey.value}}
          <small local-class='item-key-prefix'>
            {{#if this.translationKey.prefix}}
              {{this.translationKey.prefix}}
            {{else}}
              {{@translation.document.path}}
            {{/if}}
          </small>
        </strong>
      </LinkTo>
    </span>

    <span local-class='item-meta'>
      {{#if @translation.lintMessages}}
        {{#if (gt @translation.lintMessages.length 1)}}
          <AccBadge
            {{on 'click' (fn this.toggleEdit)}}
            @warning={{true}}
            @icon={{true}}
            class='tooltip tooltip--top'
            title={{t 'components.translations_list.lint_messages_label' count=@translation.lintMessages.length}}
          >
            {{inline-svg '/assets/warning.svg'}}
          </AccBadge>
        {{else}}
          {{#each @translation.lintMessages as |message|}}
            <AccBadge
              {{on 'click' (fn this.toggleEdit)}}
              @warning={{true}}
              @icon={{true}}
              class='tooltip tooltip--top'
              title={{if message.message message.message (t (concat 'components.translation_edit.lint_message.checks.' message.check))}}
            >
              {{inline-svg '/assets/warning.svg'}}
            </AccBadge>
          {{/each}}
        {{/if}}
      {{/if}}

      {{#if @translation.isConflicted}}
        <AccBadge title={{t 'components.translations_list.in_review_tooltip'}} class='tooltip tooltip--top' @link={{true}}>
          <LinkTo @route='logged-in.project.conflicts' @model={{@project.id}} @query={{hash query=@translation.id}}>
            {{t 'components.translations_list.in_review_label'}}
          </LinkTo>
        </AccBadge>
      {{/if}}

      {{#unless @translation.isTranslated}}
        <AccBadge title={{t 'components.translations_list.to_translate_tooltip'}} class='tooltip tooltip--top'>
          {{t 'components.translations_list.to_translate_label'}}
        </AccBadge>
      {{/unless}}

      {{#if @translation.commentsCount}}
        <AccBadge @link={{true}}>
          <LinkTo @route='logged-in.project.translation.comments' @models={{array @project.id @translation.id}}>
            {{t 'components.translations_list.comments_count' count=@translation.commentsCount}}
          </LinkTo>
        </AccBadge>
      {{/if}}

      <span local-class='item-updatedAt'>
        {{t 'components.translations_list.last_updated_label'}}
        <TimeAgoInWordsTag @date={{@translation.updatedAt}} />
      </span>
    </span>
  </span>

  {{#if this.isInEditMode}}
    <div {{did-insert this.focusTextarea}} local-class='item-textEdit'>
      <TranslationEdit::Form
        @permissions={{@permissions}}
        @projectId={{@project.id}}
        @translationId={{@translation.id}}
        @translationKey={{@translation.key}}
        @lintMessages={{@translation.lintMessages}}
        @inputDisabled={{this.inputDisabled}}
        @valueType={{@translation.valueType}}
        @value={{this.editText}}
        @onKeyUp={{fn this.changeTranslationText}}
        @onEscape={{fn this.toggleEdit}}
        @onSubmit={{fn this.save}}
        @rtl={{this.revisionTextDirRtl}}
        lang={{this.revisionSlug}}
        as |form|
      >
        {{#component form.submit}}
          <div local-class='textEdit-actions' data-dir={{form.dir}}>
            {{#unless @translation.isRemoved}}
              <div local-class='form-helpers'>
                <TranslationEdit::Helpers
                  @permissions={{@permissions}}
                  @project={{@project}}
                  @languageSlug={{this.revisionSlug}}
                  @prompts={{@prompts}}
                  @rtl={{this.revisionTextDirRtl}}
                  @text={{this.editText}}
                  @onUpdatingText={{fn this.onUpdatingText}}
                  @onUpdateText={{fn this.onUpdateText}}
                />
              </div>
            {{/unless}}

            <AsyncButton @onClick={{fn this.save}} @loading={{this.isSaving}} class='button button--filled button--iconOnly' local-class='item-textEdit-button'>
              {{t 'components.translations_list.save'}}
            </AsyncButton>
          </div>
        {{/component}}
      </TranslationEdit::Form>
    </div>
  {{else if this.isTextEmpty}}
    <span role='button' local-class='item-text item-text--empty' data-dir={{if this.revisionTextDirRtl 'rtl'}} {{on 'click' (fn this.toggleEdit)}}>
      {{t 'components.translations_list.empty_text'}}
    </span>
  {{else if this.isTextNull}}
    <span role='button' local-class='item-text item-text--empty' data-dir={{if this.revisionTextDirRtl 'rtl'}} {{on 'click' (fn this.toggleEdit)}}>
      {{t 'components.translations_list.null_text'}}
    </span>
  {{else}}
    <span role='button' local-class='item-text' data-dir={{if this.revisionTextDirRtl 'rtl'}} {{on 'click' (fn this.toggleEdit)}}>{{truncate @translation.correctedText 600}}</span>
  {{/if}}
</li>